<template>
	<div class="page">
		<div class="tabs-head">
			<p 
				v-for="(item, index) in tabsList" 
				:key="index" 
				:class="{'tabs-active': currentIndex === index}" 
				@click="changeTabs(index)">
				{{item}}
			</p>
		</div>
		<div class="tabs-main">
			<XMemberCardView 
				:data="cardData"
				@on-submit="clickSubmit"
				v-if="currentIndex === 0">
			</XMemberCardView>
			<XMemberQueryView 
				v-else>
			</XMemberQueryView>
		</div>
	</div>
</template>

<script>
import memberService from '@/network/service/memberService.js'

import XMemberCardView from '@/pages/member/view/XMemberCardView'
import XMemberQueryView from '@/pages/member/view/XMemberQueryView'
export default {
	components: {
		XMemberCardView,
		XMemberQueryView
	},
	data() {
		return {
			currentIndex: 0,
			tabsList: ['会员发卡', '会员查询'],
			cardData: {
				tid: null,
				cid: null,
				cardNo: null,
				stopCardNo: null,
				managementType: null,
				status: null,
				theaterName: null,
				phone: null,
				userId: null,
				cardCategoryId: null,
				userName: null,
				idNo: null,
				addr: null,
				gender: null,
				password: null,
				confirmThePassword: null,
				money: null,
				type: null,
				teamName: null,
				setPhoneLogin: null,
				creatorId: null
			},//会员发卡
		}
	},
	mounted() {
	},
	methods: {
		changeTabs(index) {
			this.currentIndex = index;
		},
		clickSubmit(formData) {
			
			this.addCard(formData);
		},

		addCard(formData) {
			memberService.addCard(formData).then(res => {
				let result = res.data;
                let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.cardData = {
						tid: null,
						cid: null,
						cardNo: null,
						stopCardNo: null,
						managementType: null,
						status: null,
						theaterName: null,
						phone: null,
						userId: null,
						cardCategoryId: null,
						userName: null,
						idNo: null,
						addr: null,
						gender: null,
						password: null,
						confirmThePassword: null,
						money: null,
						type: null,
						teamName: null,
						setPhoneLogin: null,
						creatorId: this.$store.getters.account.accId
					};
					this.$Message.success('开卡成功');
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.tabs-head {
		height: .5rem;
		p {
			background: rgba(255,255,255,0.1);
			border-radius: 8px 8px 0 0;
			color: rgba(255,255,255,0.6);
			float: left;
			width: 1.4rem;
			text-align: center;
			height: .5rem;
			line-height: .5rem;
			margin-right: .2rem;
			cursor: pointer;
		}
		.tabs-active {
			background: rgba(255,255,255,0.2);
			color: #ffffff;
		}
	}
	.tabs-main {
		width: 100%;
		height: calc(100% - .5rem);
		// height: -webkit-calc(100% - .5rem);
		// height: -moz-calc(100% - .5rem);
		background: rgba(255,255,255,0.2);
		border-radius: 0 .05rem .05rem .05rem;
		overflow: auto;
	}
}
</style>